import React, { useRef, useState, useEffect } from 'react';
import { Button, Row, Col, Input, Popconfirm, message, Select, Modal, Pagination } from 'antd';
import { EditTwoTone, DeleteFilled } from '@ant-design/icons'
const { Search } = Input
import {
    EditableProTable
} from '@ant-design/pro-components';
import { FormattedMessage, useIntl } from "umi";
import { Form } from 'antd/lib';
import { ROW_ID_KEY, SELECT_LABEL, SELECT_VALUE } from '../../../constants';
import { paginationQueryNotice, updateNotice, batchDeleteNotice } from '../../../services/notice';
import { queryDictDataByDictType } from '../../../services/dictData';

export default ({ data }) => {
    const intl = useIntl();
    const [showPanel, setShowPanel] = useState(false)
    const [noticeList, setNoticeList] = useState()
    const [open, setOpen] = useState(true);
    const [selectLoading, setSelectLoading] = useState(true)
    const [context, setContext] = useState() //模糊搜索关键词
    const [paginationData, setPaginationData] = useState({ 'current': 1, 'pageSize': 10, 'total': 0 })
    const [editableKeys, setEditableRowKeys] = useState([]);
    const ref = useRef()

    const handleOk = async (formData) => {
        let form = {noticeUnCode:data.unCode}
        noticeList.forEach(notice => {
            if (notice.unCode === formData.noticeUnCode) {
                form.noticeUnCode = formData.noticeUnCode
                form.message = notice.message
                return
            }
        })
        
        setConfirmLoading(true)
        await createNotice(form).then(res =>{
            if(res.success){
                message.success(res.msg)
                reloadParentData()
                setConfirmLoading(false)
                handleCancel()
            }
        })
    }

    const handleCancel = () => {
        setOpen(false);
    };

    let closePanel = () => {
        setShowPanel(false)
    }
    
    let onEdit = async (rowKey, data, record) => {
        let form = {
            unCode: record.unCode,
            noticeUnCode: record.noticeUnCode,
            message: record.message,
            
        }
            let res = await updateNotice(form);
            if (res.success) {
                message.success(res.msg)
                ref.current.reload();
            }
        
    }
    let onDelete = async (record) => {
        await batchDeleteNotice([record?.unCode]).then(res => {
            if (res.success) {
                message.success(res.msg)
                ref.current.reload();
            }
        })
    }
    async function getData(params) {
        params.context = context
        params.noticeUnCode = data.unCode
        let res = await paginationQueryNotice(params);
        if (res.success) {
            let resData = {
                ...res?.data,
                data: res?.data?.records
            }
            setContext()
            return resData
        }
    }
    let onSearch = (value) => {
        setContext(value)
        ref.current.reload();
    }
    //TODO 将其抽离成一个外部方法
    let onPaginationChange = (current, pageSize) => {
        setPaginationData({ ...paginationData, current, pageSize })
        getData({ context: context, current, current, pageSize, pageSize })
    }
    // columns
    const columns = [
        {
            title: '公告内容',
            dataIndex: 'message',
            ellipsis: true,
            width: 100,
            editable: false,
        },
        
        {
            title: '创建人',
            dataIndex: 'createBy',
            hideInSearch: true,
            editable: false,
        },
        {
            title: '最后更新时间',
            dataIndex: 'updateTime',
            valueType: 'dateTime',
            hideInSearch: true,
            editable: false,
        },
        {
            title: '更新人',
            dataIndex: 'updateBy',
            hideInSearch: true,
            editable: false,
        },
        {
            title: '操作',
            valueType: 'option',
            hideInSearch: true,
            width: 150,
            dataIndex: { ROW_ID_KEY },
            render: (text, record, _, action) => [
                // <Button type="text" key="editable" shape="circle" size='small' icon={<EditTwoTone />} onClick={() => {
                //     action?.startEditable?.(record.unCode);
                // }}/>,
                <Popconfirm
                    key={'delete'}
                    title={intl.formatMessage({
                        id: 'pages.Popconfirm.title',
                        defaultMessage: '确认删除'
                    })}
                    toolBar
                    description={intl.formatMessage({
                        id: 'pages.Popconfirm.description',
                        defaultMessage: '是否删除该条记录？'
                    })}
                    onConfirm={() => { onDelete(record) }}
                    okText={intl.formatMessage({
                        id: 'pages.Popconfirm.okText',
                        defaultMessage: '确认'
                    })}
                    cancelText={intl.formatMessage({
                        id: 'pages.Popconfirm.cancelText',
                        defaultMessage: '取消'
                    })}>
                    <Button type="text" danger shape="circle" size='small' icon={<DeleteFilled />} />
                </Popconfirm>,

            ],
        },
    ];
    return (
        <>

            <EditableProTable
                actionRef={ref}
                search={false}
                options={{ fullScreen: false, reload: true, density: true, setting: true }}
                columns={columns}
                request={async (params = {}) => getData(params)
                }
                recordCreatorProps={false}
                pagination={{
                    pageSize: paginationData.pageSize,
                    total: paginationData.total,
                    current: paginationData.current,
                    showSizeChanger: true,
                    onChange: onPaginationChange
                }}
                rowKey={ROW_ID_KEY}
                dateFormatter="string"
                headerTitle='公告管理'
                toolBarRender={() => [
                    <>
                        <Row align='middle' justify='space-between' style={{ width: '400px' }}>
                            <Col span={19}>
                                <Search
                                    style={{ width: '290px' }}
                                    placeholder={intl.formatMessage({
                                        id: 'app.dictData.table.toolBar.search.placeholder',
                                        defaultMessage: '请输入字典值编码、值、标签关键词'
                                    })}
                                    onSearch={onSearch}
                                />
                                </Col>
                        </Row>

                    </>
                ]}
                
                editable={{
                    type: 'multiple',
                    editableKeys,
                    onSave: async (rowKey, data, row) => {
                        onEdit(rowKey, data, row)
                    },
                    onDelete: async (rowKey, data, row) => {
                        onDelete(data)
                    },
                    onChange: setEditableRowKeys,
                }}
            ></EditableProTable>
        </>
    );
};
